<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="内容">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
            <Editor style="height: 550px; overflow-y: hidden;" v-model="obj.title" :defaultConfig="editorConfig"
                :mode="mode" @onCreated="onCreated" />
        </el-tab-pane>
        <el-tab-pane label="事件">
            <event-form :obj="obj" />
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { mapGetters } from 'vuex'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// import { DomEditor } from '@wangeditor/editor'

export default {
    name: "ContextForm",
    components: {
        BoxForm: () => import('../mixin/BoxForm.vue'),
        EventForm: () => import('../mixin/EventForm.vue'),
        Editor,
        Toolbar
    },
    computed: {
        ...mapGetters(['colorMap'])
    },
    props: {
        predefineColors: Array,
        obj: Object,
        setColorChange: Function,
        setFontStyle: Function,
    },
    data() {
        return {
            editor: null,
            toolbarConfig: {
                excludeKeys: [
                    "blockquote",
                    "emotion",
                    "bgColor",
                    "bulletedList",
                    "numberedList",
                    "todo",
                    "insertLink",
                    "group-image",
                    "group-video",
                    "fullScreen",
                    "undo",
                    "redo",
                    "group-more-style",
                    "codeBlock",
                    "insertTable",
                    "|",
                ]
            },
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'
        }
    },
    model: {
        prop: "obj",
        event: "change",
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        // a() {
        //     const toolbar = DomEditor.getToolbar(this.editor)
        //     const curToolbarConfig = toolbar.getConfig()
        //     console.log(curToolbarConfig.toolbarKeys) // 当前菜单排序和分组
        // }
    },
    mounted() {
        // var self = this;
        // setTimeout(function () {
        //     self.a();
        // }, 2000)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}
</script>

<style>
.w-e-text-container span{color:#333 !important;background:none !important;}
</style>